<template>
  <div class="count">
    <h2>我是count组件</h2>
    <button @click="count1++">累加父组件给我的count</button>
    <button @click="add">查看组件实例</button>
    <p>子组件展示prop{{ count1 }}</p>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      /* 如果真的是要拿到父组件数据以后,然后直接要修改,可以使用data或者计算数据进行接受,再修改,但是这样就不能影响父组件的数据了(一般来说不推荐,也很少有这种场景) */
      count1: this.count,
    };
  },
  /* 
    1.如果想要在组件实例上拿到父组件传递过来的props,必须先进行接收
    2. 接受props之后,就可以通过this.$props这个对象中拿到数据了
  */
  props: ["count"],
  methods: {
    add() {
      console.log(this);
      console.log(this.count);
      console.log(this.$props.count);
    },
  },
};
</script>

<style scoped>
.count {
  background-color: pink;
}
</style>
